import React from "react";
import HomePageUI from "./mainUI/HomePageUI";
import ScrollableTabView from "react-native-scrollable-tab-view";
import TabBar from "../../common/component/TabBar";
import BuyCar from "../page/buyCar/BuyCar";
import SoldCar from "../page/SoldCar";
import MineNewUI from "../page/mine/MineUI";
import * as ActionTypeConstant from "../constant/ActionType";
import {connect} from "react-redux";
import PubSub from 'pubsub-js';


class MainUI extends React.Component {
    // 构造函数，可执行初始化操作
    constructor(props) {
        super(props);
        // 在ES6，在构造函数里初始化state
        this.state = {};
        this._changePage = this._changePage.bind(this);
    }

    // 组件被加载时
    componentDidMount() {
        PubSub.subscribe(ActionTypeConstant.CHANGE_PAGE, this._changePage);
    }

    // 组件即将被卸载时
    componentWillUnmount() {
        PubSub.unsubscribe(this._changePage);
    }

    _changePage(msg, index) {
        console.log('change page  ' + index);
        this.tabView.goToPage(index);
    }

    // 组件被渲染时
    render() {
        const nameList = ['首页', '买车', '卖车', '我的'];
        const iconList = [
            require('../../img/homepage/tabHomePageNor.png'),
            require('../../img/homepage/tabBuyCarNor.png'),
            require('../../img/homepage/tabSoldCarNor.png'),
            require('../../img/homepage/tabMineNor.png')
        ];
        const iconSelList = [
            require('../../img/homepage/tabHomePageSel.png'),
            require('../../img/homepage/tabBuyCarSel.png'),
            require('../../img/homepage/tabSoldCarSel.png'),
            require('../../img/homepage/tabMineSel.png')
        ];
        return (
            <ScrollableTabView
                ref={(tabView) => {
                    this.tabView = tabView;
                }}
                renderTabBar={() => <TabBar tabNameList={nameList} tabIconList={iconList}
                                            tabIconSelList={iconSelList}/>}
                locked={true}
                tabBarPosition="bottom"
            >
                <HomePageUI />
                <BuyCar/>
                <SoldCar/>
                <MineNewUI />
            </ScrollableTabView>
        );
    }
}

export function goToPage(index) {
    PubSub.publish(ActionTypeConstant.CHANGE_PAGE, index);
}
export default connect()(MainUI);
